<template>
  <div ref="chartContainer" style="width: 100%;height: 270px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chartContainer);

      const option = {
        title: {
          text: '采购入库单据数量',
          left: '0',
          textStyle: {
            color: '#333',
            fontSize: 16,
            // right: 20,
          }
        },
        tooltip: {},
        legend: {
          data: ['Online Sales', 'Offline Sales'],
          orient: 'vertical',
          x: 'right',
          y: 'middle',
          textStyle: {
            color: '#aaa'
          }
        },
        grid: {
          left: '0',
          right: '3%',
          // top: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0, // 显示所有类目标签
            rotate: -45 // 旋转标签，防止重叠
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // name: 'Online Sales',
            type: 'bar',
            data: [15000, 18000, 4000, 17000, 16000, 19000, 22000],
            barWidth: '20%', // 调整柱子宽度
            barGap: '+30%', // 增加不同系列柱子间的间隔
            itemStyle: { // 添加 itemStyle 属性
              normal: {
                color: '#67B9E5' // 设置在线销售的柱子颜色为蓝色
              }
            }
          },
          {
            // name: 'Offline Sales',
            type: 'bar',
            data: [13000, 14000, 23000, 5000, 14000, 17000, 12000],
            barWidth: '20%',
            barGap: '+30%',
            itemStyle: { // 添加 itemStyle 属性
              normal: {
                color: '#AEDDCE' // 设置离线销售的柱子颜色为绿色
              }
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style scoped></style>
